function add_htmle(parentId){
	$( "#dialog-form" ).dialog( "open" );
}

function insert_html_element(parentId, tagName, attributes, properties){
	//alert(parentId + " " + tagName +" "+ " " + content);
	//if (tagName == "img"){
	//	var img = create_img_tag(parentId, id, content);
	//	return img;
	//}
	//var newElem = $(document.createElement(tagName)).appendTo("#" + parentId).attr("id", id).text(content);
	
	attributes = $.extend({},{
		drag: true,
		resize: true,
		rotate: false
	}, attributes);
	
	var newElem = new_html_element(tagName, attributes, properties).appendTo("#" + parentId);
	var id = newElem.attr("id");
	dhxTree.insertNewChild(parentId , id, id, 0,0,0,0, "CHILD,CHECKED");
	
	var content = attributes.Text;
	if (content != null && content != ""){
		newElem.text(content);
		dhxTree.insertNewChild(id , id+"-text", content, 0,0,0,0, "");
		dhxTree.setItemImage2(id+"-text",'','','');
		//dhxTree.editItem(id+"-text");	// make text node editable
	}
	
	newElem.attr("type", "basic").addClass("basic-element");
	
	// create an associated Table element holding attributes
	var propTable = create_prop_table(id, properties);
	newElem.data("prop_table", propTable);
	
	var attrTable = create_attr_table(id, content, attributes);
	newElem.data("attr_table", attrTable);
	
	newElem.click(function(e){
		e.stopPropagation();	// stop event to not choose ancestor
		if ($(this).data("dragging")) return;
		zIndexMax ++;
		$(this).css( "z-index" , zIndexMax );
		select_element(id);
	});
	
	//
	if (attributes.drag) newElem.draggable();
	if (attributes.resize) newElem.resizable();
	//newElem.rotatable();
	
	return newElem;
}

function create_prop_table(elementId, properties){
	var table = $(document.createElement("table"));
	table.addClass("property-table");
	$("<tr><th colspan='2'>" + elementId + "</th></tr>").appendTo(table);
	table.attr("width", "100%");
	table.attr("cellspacing", "0");
	table.attr("cellpadding", "4px");
	table.attr("elementId", elementId);
	
	if (properties != null)
	$.each(properties, function(key, value) {
		var tr = $(document.createElement("tr")).appendTo(table);
		_create_input_td(key, "css-name").appendTo(tr);
		_create_input_td(value, "css-value").appendTo(tr);
	});
	
	return table;
}

function create_attr_table(elementId, content, attributes){
	var table = $(document.createElement("table"));
	table.addClass("attr-table");
	$("<tr><th colspan='2'>" + elementId + "</th></tr>").appendTo(table);
	table.attr("width", "100%");
	table.attr("cellspacing", "0");
	table.attr("cellpadding", "4px");
	table.attr("elementId", elementId);
	
	// draggable attribute
	
	if (attributes != null)
	$.each(attributes, function(key, value) {
		var tr = $(document.createElement("tr")).appendTo(table);
		
		if (key == "drag" || key == "resize" || key == "rotate"){
			$(document.createElement("td")).addClass("attr-name").attr("width", "50%").text(key).appendTo(tr);
			_create_check_td(key, value).appendTo(tr);
			return;
		}
		
		_create_input_td(key, "attr-name").appendTo(tr);
		_create_input_td(value, "attr-value").appendTo(tr);
	});
	
	return table;
}

function _create_check_td(key, boolean){
	var td = $(document.createElement("td")).attr("width", "50%");
	
	var chk_img = $(document.createElement("img")).width(15).height(15).appendTo(td);
	
	if (boolean){
		chk_img.attr("src", "/images/small_right_tick2.jpg");
	}
	else chk_img.attr("src", "/images/X_tick.png");
	
	td.click(function(e){
		var img = $(this).children("img");
		
		var check = false;
		if (img.attr("src") == "/images/X_tick.png"){
			img.attr("src","/images/small_right_tick2.jpg");
			check = true;
		}
		else img.attr("src","/images/X_tick.png");
		
		var elemId = $(this).closest("table").attr("elementId");
		
		basic_set_attribute(elemId, key, check);
		
	});
	
	return td;
}

// Creating a <td> tag that inputable with click
function _create_input_td(value, tdClass){
	var td = $(document.createElement("td")).attr("width", "50%").addClass(tdClass, "editable").text(value);
	
	if (tdClass == "css-name" || tdClass == "attr-name"){
		var icon_class = "delete-property-button";
		if (tdClass == "attr-name") icon_class = "delete-attribute-button";
		_create_icon_button(icon_class, "/images/close_button.gif").appendTo(td).hide();
		
		td.bind("mouseover mouseout", function(e){
			$(this).children("img").toggle();
		});
	}
	
	td.click(function(e){
		if ($(this).children().is("input")) return;
		var oldValue = $(this).text();
		
		// If Click on delete button
		if ($(e.target).is("img")){
			var elemId = $(this).closest("table").attr("elementId");
			
			if (tdClass == "css-name") basic_unset_prop(elemId, oldValue);		//
			if (tdClass == "attr-name") basic_unset_attribute(elemId, oldValue);
			
			$(this).closest("tr").remove();
			return;
		}
		
		var close=null;
		if (tdClass == "css-name" || tdClass == "attr-name") close = $(this).children("img");
		
		$(this).text("");
		var input = $(document.createElement("input")).appendTo(this);
		input.val( oldValue );
		/**/
		input.focus(function(){
			this.select();
		});
		input.focus();/**/
		
		var td = $(this); // The element clicked
		
		// Set the Css value of target element after Enter
		var setValue = function(e){
			var value = input.val();
			input.remove();
			td.text(value);
			
			var tr = td.closest("tr");
			var name = tr.children("td:eq(0)").text();
			var value = tr.children("td:eq(1)").text();
			var elementId = td.closest("table").attr("elementId");
			
			if (tdClass == "css-name"){
				basic_unset_prop(elementId, oldValue);	
			}
			if (tdClass == "attr-name"){
				basic_unset_attribute(elementId, oldValue);	
			}
			
			if (tdClass == "css-name" || tdClass == "css-value")
				basic_set_prop(elementId, name, value);
			if (tdClass == "attr-name" || tdClass == "attr-value")
				basic_set_attribute(elementId, name, value);
			
			if (close){
				close.appendTo(td);
				close.hide();
			}
		};
		
		/*
		input.autocomplete({
		    //source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "font-size"],
		    source: css_attributes,
		    //position: { my : "right top", at: "right bottom" },
		    open: function(e, ui){
		    	$("ul.ui-autocomplete").css("z-index", 100);
		    },
		    select: function(e, ui){
		    	setTimeout(function(e){
		    		setValue(e);
		    	}, 10);
		    	//alert("create");
		    }
		});
		
		/**/
		input.blur(function(e){
			setValue(e);
		});
		/**/
		input.keypress(function(e){
			var code = (e.keyCode ? e.keyCode : e.which);
			if (code == 13) setValue(e);
		});
	});
	
	return td;
}

function _create_icon_button(icon_class, src){
	var icon = $(document.createElement("img")).addClass(icon_class).attr("src", src);
	return icon;
}

function select_element(id){
	
	if (selectingId == id) return false;
	
	if (selectingId != ""){
		unselect_element(selectingId);
		selectingId = "";
	}
	
	selectingId = id;
	
	// select on tree
	dhxTree.selectItem(id,false,false);
	
	$("#" + id).addClass("selecting-element");
	
	var propTable = $("#"+id).data("prop_table");	// get attributes table element
	$("div#element-css-properties ul#icons:first").before(propTable);	// insert into attribute area
	$("div#element-css-properties ul#icons").show();
	
	var attrTable = $("#"+id).data("attr_table");	// get attributes table element
	$("div#element-attributes ul#icons:first").before(attrTable);	// insert into attribute area
	$("div#element-attributes ul#icons").show();
}

function unselect_element(id){
	$("#"+id).data("prop_table").detach();	// remove the table from attribute area
	$("#"+id).data("attr_table").detach();	// remove the table from attribute area
	
	$("#"+id).removeClass("selecting-element");	//
	
	//$("div#elem-cltr").hide();	// hide control element panel
}

function basic_set_prop(id, name, value){
	// In case of Css attribute
	var element = id;
	if (typeof(id) == "string") element = $("#"+id);
	
	element.css(name, value);
	
}
function basic_unset_prop(id, name){
	// In case of Css attribute
	var element = id;
	if (typeof(id) == "string") element = $("#"+id);
	
	element.css(name, "");
	
}

function basic_set_attribute(elemId, attr, value){
	var element = elemId;
	if (typeof(elemId) == "string") element = $("#"+elemId);
	elemId = element.attr("id");
	
	if (attr=="Text"){
		// change the text only
		var children = element.children().detach();
		element.text(value).append(children);
		
		dhxTree.setItemText(elemId + "-text", value, "abcd");
		return;
	}
	
	if (attr == "drag"){
		element.draggable( "option", "disabled", !value );
		return;
	}
	if (attr == "resize"){
		element.resizable( "option", "disabled", !value );
		return;
	}
	
	element.attr(attr, value);
}
function basic_unset_attribute(elemId, attr){
	var element = elemId;
	if (typeof(elemId) == "string") element = $("#"+elemId);
	elemId = element.attr("id");
	
	if (attr=="Text"){
		// change the text only
		var children = element.children().detach();
		element.text("").append(children);
		
		dhxTree.deleteItem(elemId + "-text", false);
		return;
	}
	
	element.attr(attr, "");
}

function delete_element(id){
	if (selectingId == "") return false;
	if (selectingId == id){
		selectingId = "";
		$("div#element-attributes ul#icons").hide();
	}
	
	$("#"+id).data("prop_table").remove();	// remove properties table
	$("#"+id).data("attr_table").remove();	// remove attributes table
	
	$("#"+id).remove();	// remove element itself
	dhxTree.deleteItem(id, false);	// remove on tree
}

function initialize_tree(){
	dhxTree.enableDragAndDrop(true, false);
    //dhxTree.setDragBehavior("complex", false);
    
    // set onSelect event on tree
    var regxTnode = /text$/;
    var regxImg = /img-/;
    dhxTree.attachEvent("onSelect", function(id){
    	if (id == "card") return;
    	if (regxTnode.test(id)) return;
    	select_element(id);
    });
    
    // beforeDrag handling
    /**/
    dhxTree.attachEvent("onBeforeDrag", function(sId){
    	if (regxTnode.test(sId)) return false;
    	return true;
    });
    /**/
    
    dhxTree.attachEvent("onDrag", function(sId,tId,id,sObject,tObject){
    	if (regxTnode.test(tId) || regxImg.test(tId)) return false;
    	return true;
    });
    
    // onDrop handling
    dhxTree.attachEvent("onDrop", function(sId,tId,id,sObject,tObject){
    	//alert(sId + " " + tId);
    	$("#" + sId).appendTo("#" + tId);
    });
    
    //dhxTree.enableItemEditor(true);
}
function get_new_elementId(tag_name){
	var id;
	if (tag_name in elem_count){
		id = tag_name + "-" + elem_count[tag_name];
		elem_count[tag_name] ++;
	}
	else {
		elem_count[tag_name] = 1;
		id = tag_name + "-0";
	}
	
	return id;
}

function new_html_element(tagName, attributes, properties){
	var id = get_new_elementId(tagName);
	var newElem = $(document.createElement(tagName)).attr("id", id);
	
	if (attributes != null)
	$.each(attributes, function(key, value) {
		//newElem.attr(key, value);
		//alert(key + " " + value);
		basic_set_attribute(newElem, key, value);
	});
	if (properties != null)
	$.each(properties, function(key, value) {
		//newElem.css(key, value);
		//alert(key + " " + value);
		basic_set_prop(newElem, key, value);
	});
	
	return newElem;
}

// add one row to css table or attribute table, type: "css" || "attr"
function add_table_row(table, name, value, type){
	var tr = $(document.createElement("tr")).appendTo(table);
	
	_create_input_td(name, type+"-name").appendTo(tr);
	_create_input_td(value, type+"-value").appendTo(tr);
	
	return tr;
}

function addCssTemplate(table, styleId){
	if (!styleXml) return;	// styleXml global Xml style object
	
	$(styleXml).find("style#" + styleId).children("css").each(function(){
		var property = $(this).attr("property");
		var value = $(this).attr("value");
		
		add_table_row(table, property, value, "css");
		
		var elementId = $(table).attr("elementId");
		basic_set_prop(elementId, property, value);	//basic_htmle.js
	});
	
	return table;
}